<template>
  <el-form-item :label="`${label} :`"  :prop="prop || model" :rules="rules" size="small" :class="{'form_unit' : unit}">
    <!-- 输入框 -->
    <template v-if="type == 'input'">
      <el-input :disabled="disabled" v-model="addForm[model]" @input="input" :show-password="showPassword" :placeholder=placeholder></el-input>
      <span v-if="unit">{{unit}}</span>
    </template>

    <!-- 下拉框 -->
    <template v-if="type == 'select'">
      <el-select :disabled="disabled"  :multiple="multiple" collapse-tags filterable @change="change" v-model="addForm[model]" style="width: 100%;" placeholder="请选择">
        <el-option 
          v-for="(item, index) in selectList" :key="index"
          :label="selectOption ? item[selectOption.label] : item.label" 
          :value="selectOption ? item[selectOption.value] : item.value">
        </el-option>
      </el-select>
    </template>

    <!-- 时间选择器 -->
    <template v-if="type == 'date'">
      <el-date-picker
        v-model="addForm[model]"
        type="date"
        :disabled="disabled"
        @change="change"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>
    </template>

    <!-- 时间选择器 -->
    <template v-if="type == 'year'">
      <el-date-picker
        v-model="addForm[model]"
        type="year"
        :disabled="disabled"
        value-format="yyyy"
        placeholder="选择年份">
      </el-date-picker>
    </template>

    <!-- 时间选择器 -->
    <template v-if="type == 'month'">
      <el-date-picker
        v-model="addForm[model]"
        type="month"
        :disabled="disabled"
        value-format="yyyy-MM"
        placeholder="选择年月">
      </el-date-picker>
    </template>

    <!-- 时间选择器 -->
    <template v-if="type == 'hour'">
      <el-time-picker
        v-model="addForm[model]"
        :disabled="disabled"
        format="HH:mm"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择时间">
      </el-time-picker>
    </template>

    <!-- 时间选择器 -->
    <template v-if="type == 'timeSelect'">
      <el-time-picker
        is-range
        :disabled="disabled"
        v-model="addForm[model]"
        range-separator="至"
        :format="timeFormat"
        :value-format="timeFormat"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
    </template>

    <!-- 复选框 -->
    <template v-if="type == 'checkbox'">
      <el-checkbox-group v-model="addForm[model]">
        <el-checkbox
          v-for="(item) in checkboxList"
          :key="item[option.id]"
          :label="item[option.id]" 
          name="type">
          {{item[option.label]}}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <!-- 单选框 -->
    <template v-if="type == 'radio'">
      <el-radio 
        :disabled="disabled"
        @change="change"
        v-for="item in radioList" 
        :key="item.value" 
        v-model="addForm[model]" 
        :label="item.value" 
        :value="item.value"
      >
        {{item.label}}
      </el-radio>

    
    </template>

    
  </el-form-item>
</template>




<script>

/**
 * input 示例
  <form-item 
    label="查明储量2"  
    model="ascerResource" 
    type="input" 
    :addForm="addForm"
    unit="m"
  ></form-item>
 */

/**
 * select 示例
 * <form-item 
      label="任务类型"  
      model="teamType" 
      type="select"
      :selectList="teamTypeList"
      :selectOption="selectOption"
      :addForm="addForm"
    ></form-item>
 */

export default {
  props: [
    'label', 
    'type', 
    'model', 
    'prop', 
    'rules', 
    "unit", 
    'addForm', 
    'checkboxList', 
    'selectOption', 
    'selectList', 
    'disabled',
    'showPassword',
    'timeFormat',
    'multiple',
    'radioList',
    'placeholder',
    ],
  data() {
    return {
      
    }
  },

  mounted() {
    // console.log(this.prop)
    // console.log(this.addForm)
    // console.log(this.model)
  },

  methods: {
    change(data) {
      this.$emit('change', data, this.model)
    },
    input(data) {
      this.$emit('input', data, this.model)
    }
  },
}
</script>